<template>
  <div class="home">
      <!-- 顶部 -->
      <Htop></Htop>
      <div class="flex JustifyContentSB  font_20 colorF" style=" margin: -0.7rem 1rem 0rem 1rem;  ">
        <p>多云，27~31°C</p>
        <p>{{ `${year}/${month}/${day} ${hour}:${minutes}:${seconds}` }}</p>
      </div>

      <div class="flex">
        <!-- 左部 -->
        <Hleft></Hleft>
        <Hcenter></Hcenter>
        <!-- 右部 -->
        <Hright></Hright>
      </div>
      <!-- 下部 -->
      <Hbottom></Hbottom>
    </div>

</template>

<script>
import { mapFun } from '@/components/gdmap'
import { lowRisk, middRisk, jsmc, zhuyang, qitadata, rituodata, hulidata, jujiadata, zhuyangdata } from '@/listData.js'
import Htop from '@/views/components/Htop'
import Hleft from '@/views/components/Hleft'
import Hright from '@/views/components/Hright'
import Hcenter from '@/views/components/Hcenter'
import Hbottom from '@/views/components/Hbottom'

export default {
  name: 'home',
  components: {
    Htop,
    Hleft,
    Hright,
    Hcenter,
    Hbottom
  },

  data () {
    return {
      arr: [],
      arr1: [],
      year: '',
      month: '',
      day: '',
      hour: '',
      minutes: '',
      seconds: '',
      modely1: false,
      modely2: false,
      modely101: false

    }
  },
  mounted () {

  },
  created () {
    // console.log(lowRisk)
    this.arr = jsmc
    this.arr1 = zhuyang

    // 获取当前年月日，时分秒
    this.getCurrentDate()
  },
  methods: {
    // 获取当前年月日，时分秒
    getCurrentDate () {
      setInterval(() => {
        let date = new Date()
        this.year = date.getFullYear()
        this.month = date.getMonth() + 1
        this.day = date.getDate()
        this.hour = date.getHours()
        this.minutes = date.getMinutes()
        this.seconds = date.getSeconds()

        if (this.minutes >= 0 && this.minutes <= 9) {
          this.minutes = '0' + this.minutes
        }
        if (this.seconds >= 0 && this.seconds <= 9) {
          this.seconds = '0' + this.seconds
        }
      }, 1000)
    },

    hiddeny1 () {
      this.modely1 = false
    },
    hiddeny2 () {
      this.modely2 = false
    },
    hidden101 () {
      this.modely101 = false
    },
    opencs (jgmc) {
      console.log('121212')
      if (jgmc === '上海浦东孝缘社区服务中心') {
        this.modely1 = true
      } else if (jgmc === '上海海亿达护理站') {
        this.modely101 = true
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  background: url(../assets/img/home/bg.png) no-repeat;
  background-size: 100% 100%;

  .modely101ImgDiv {
    height: 50vh;
    width: 44vw;
    overflow: hidden;
    position: absolute;
    right: 8vw;
    overflow-y: auto;
    top: 17.5vh;
    img {
      width: 40vw;
    }
  }
  .modely101 {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
  }
  .modely101BA {
    background-image: url('../assets/img/modely101BA.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    width: 90vw;
    height: 80vh;
    position: relative;
  }

  #container {
    width: 47.625rem;
    height: 34.25rem;
   position: absolute;
   top: 24.4%;
   left: 29.95%;
   z-index: 0;
  }

  .title {
    height: 10.5vh;
  }

}
</style>
